<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提示框</title>
    <!-- 引入Element UI的CSS文件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
      <template>
          <el-button @click="open1()">消息</el-button>
          <el-button @click="open2()">成功</el-button>
          <el-button @click="open3()">警告</el-button>
          <el-button @click="open4()">错误</el-button>
      </template>
  </div>
  <!-- 引入Vue的js文件 -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- 引入Element UI的js文件 -->
  <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
  <script>
    let v = new Vue({
      el : "#app",
      data : function() {
        return {

        }
      },
      methods : {
          open1() {
            v.$message("这是一个普通的消息提示")
          },
          open2() {
            v.$message({
                message : "恭喜你，这是一个成功消息", // 提示信息
                type : "success", // 提示框类型 成功提示
                center : true, // 提示信息是否居中
                showClose : true // 是否显示关闭按钮
            })
          },
          open3() {
            v.$message({
                message : "警告，这是一条警告信息",
                type : "warning",
                duration : 1000 // 持续时间(单位:毫秒) 默认是3秒
            })
          },
          open4() {
            // 完整写法
            /*v.$message({
                message : "出错啦，这是一条错误消息",
                type : "error"
            })*/
            // 简写
            v.$message.error("出错啦，这是一条错误消息")
          }
      }
    })
  </script>
</body>
</html>